<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page</title>
<link rel="stylesheet" href="<?php echo base_url();?>assets/css/style.default.css" type="text/css" />
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.8.3.min.js"></script>
</head>
<body class="loginbody">
	<div class="container">
		<div class="text-center">
<!--
		<img src="<?php echo base_url()?>assets/img/logo.png" alt="Metis Logo">
-->
		</div>
		<?php echo validation_errors(); ?>
		<div class="loginwrapper">
			<div class="alert alert-danger" style="display: none;">
				<strong>Error!</strong> <span id="error-msg"></span>
			</div>		
			<div class="loginwrap zindex100 animate2 bounceInDown">
				<div id="login" class="tab-pane active">
					<h1 class="logintitle"><span class="iconfa-lock"></span> Login <span class="subtitle">Masukkan Username dan Password</span></h1>
				<div class="loginwrapperinner">
					<form action="<?php echo base_url()?>index.php/login/verify" class="form-signin" method="post" id="loginform">
						<p class="animate4 bounceIn"><input name="username" id="username" type="text" placeholder="Username" class="form-control"></p> 
						<p class="animate5 bounceIn"><input name="password" id="password" type="password" placeholder="Password" class="form-control"></p>
						<p class="animate6 bounceIn"><button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button></p>
					</form>
					</div>
				</div>
		    </div>
			<div class="loginshadow animate3 fadeInUp"></div>
		</div>
	</div>
	<!-- /container -->
<script type="text/javascript">
jQuery.noConflict();

jQuery(document).ready(function(){

	<?php if(isset($error_msg)){ ?>
	jQuery('#error-msg').text(<?php echo validation_errors(); ?>);
	jQuery('.alert').show();
	<?php }?>
	var anievent = (jQuery.browser.webkit)? 'webkitAnimationEnd' : 'animationend';
	jQuery('.loginwrap').bind(anievent,function(){
		jQuery(this).removeClass('animate2 bounceInDown');
	});
	
	jQuery('#username,#password').focus(function(){
		if(jQuery(this).hasClass('error')) jQuery(this).removeClass('error');
	});
	
	jQuery('#loginform button').click(function(){
		if(!jQuery.browser.msie) {
			if(jQuery('#username').val() == '' || jQuery('#password').val() == '') {
				if(jQuery('#username').val() == '') jQuery('#username').addClass('error'); else jQuery('#username').removeClass('error');
				if(jQuery('#password').val() == '') jQuery('#password').addClass('error'); else jQuery('#password').removeClass('error');
				jQuery('.loginwrap').addClass('animate0 wobble').bind(anievent,function(){
					jQuery(this).removeClass('animate0 wobble');
				});
				jQuery('#error-msg').text('Isi Semua Kolom');
				jQuery('.alert').show();
			} else {
				jQuery('.loginwrapper').addClass('animate0 fadeOutUp').bind(anievent,function(){
					jQuery('#loginform').submit();
				});
			}
			return false;
		}
	});
});
</script>
</body>
</html>
